<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar">
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        round
        icon="search"
      >搜索</van-button>
    </van-nav-bar>
    <!-- /导航栏 -->
    <van-tabs v-model="active"  animated swipeable>
      <van-tab :title="item.name" v-for="item in channels" :key="item.id">
        <Homelist :channel='item'></Homelist>
        </van-tab>
      <div slot="nav-right" class="oicon">
        <van-icon name="coupon-o" />
      </div>
    </van-tabs>
  </div>
</template>

<script>
import { userlist } from '@/api/user'
import Homelist from '@/components/home-list.vue'
export default {
  name: 'HomeIndex',
  components: { Homelist },
  props: {},
  data () {
    return {
      active: 0,
      channels: []
    }
  },
  computed: {},
  watch: {},
  async created () {
    // this.add()
    try {
      const { data } = await userlist()
      this.channels = data.data.channels
      // console.log(this.channels)
    } catch (err) {
      console.log('获取失败', err)
    }
  },
  mounted () {},
  methods: {
    // async add () {

    // }
  }
}
</script>

<style scoped lang="less">
.home-container {
  padding-bottom: 50px;
  // background: #5babfb;
  // padding-top: 80px;
  // padding-bottom: 50px;
  /deep/.van-nav-bar__title {
    max-width: unset;
  }
  .search-btn {
    width: 250px;
    height: 32px;
    background-color: #5babfb;
    border: none;
    font-size: 14px;
    .van-icon {
      font-size: 16px;

    }
  }
  .oicon{
    position: fixed;
    right: 0;
    line-height:43px ;
    font-size: 25px;
    padding-left:5px ;
    border-left: 1px solid #ccc;
  }
}
</style>
